<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>音乐播放器 - 登录</title>

	<!-- 引入外部资源 -->
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- 配置Tailwind自定义主题 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#6366f1',
						secondary: '#8b5cf6',
						neutral: '#f3f4f6',
					},
					fontFamily: {
						inter: ['Inter', 'system-ui', 'sans-serif'],
					},
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		@layer utilities {
			.content-auto {
				content-visibility: auto;
			}
			.bg-gradient-custom {
				background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
			}
			.card-shadow {
				box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1), 0 8px 10px -6px rgba(99, 102, 241, 0.1);
			}
			.input-focus {
				@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
			}
		}
	</style>
</head>
<body class="font-inter bg-gray-50 min-h-screen p-4">
<!-- 增加外层容器确保居中 -->
<div class="flex items-center justify-center min-h-screen w-full">
	<!-- 背景装饰元素 -->
	<div class="fixed inset-0 overflow-hidden -z-10">
		<div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
		<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary/20 rounded-full blur-3xl"></div>
	</div>

	<!-- 登录卡片 -->
	<div class="w-full max-w-md">
		<div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-300 hover:scale-[1.01]">
			<!-- 标题区域 -->
			<div class="text-center mb-8">
				<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-custom text-white mb-4">
					<i class="fa fa-music text-2xl"></i>
				</div>
				<h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">音乐服务器</h1>
				<p class="text-gray-500 mt-1">请登录您的账号</p>
			</div>

			<!-- 表单区域 -->
			<form>
				<!-- 用户名输入 -->
				<div class="mb-5">
					<label for="user" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
					<div class="relative">
						<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
							<i class="fa fa-user"></i>
						</div>
						<input
								type="text"
								name="username"
								id="user"
								placeholder="请输入用户名"
								class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
						>
					</div>
				</div>

				<!-- 密码输入 -->
				<div class="mb-6">
					<label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
					<div class="relative">
						<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
							<i class="fa fa-lock"></i>
						</div>
						<input
								type="password"
								name="password"
								id="password"
								placeholder="请输入密码"
								class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
						>
					</div>
				</div>

				<!-- 错误提示框 -->
				<div class="mb-6 hidden" id="errorAlert">
					<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center">
						<i class="fa fa-exclamation-circle mr-2"></i>
						<span id="errorMessage">用户名或密码错误</span>
					</div>
				</div>

				<!-- 登录按钮 -->
				<button
						type="button"
						id="submit"
						class="w-full bg-gradient-custom text-white font-medium py-3 px-4 rounded-lg transition-all hover:shadow-lg hover:shadow-primary/30 active:scale-98"
				>
					登录
				</button>
			</form>

			<!-- 额外链接 -->
			<div class="mt-6 text-center text-gray-500 text-sm">
				<a href="#" class="hover:text-primary transition-colors">忘记密码?</a>
				<span class="mx-2">|</span>
				<a href="register.html" class="hover:text-primary transition-colors">注册账号</a>
			</div>
		</div>

		<!-- 页脚 -->
		<p class="text-center text-gray-500 text-xs mt-6">
			&copy; 2025 音乐服务器 | 现代音乐体验
		</p>
	</div>
</div>

<!-- 引入jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>

<!-- 登录逻辑 -->
<script>
	$(function(){
		$("#submit").click(function(){
			var username = $("#user").val();
			var password = $("#password").val();

			if(username.trim() === "" || password.trim() === "") {
				// 显示错误提示
				$("#errorMessage").text("用户名和密码不能为空");
				$("#errorAlert").removeClass("hidden").addClass("block");
				return;
			}

			// 隐藏错误提示
			$("#errorAlert").addClass("hidden").removeClass("block");

			$.ajax({
				url:"/user/login",
				data:{"username":username,"password":password},
				type:"POST",
				dataType:"json",
				success:function(data) {
					console.log(data);
					if(data.status == 0) {
						alert("登录成功！");
						window.location.href="list.html";
					}else{
						// 显示错误提示
						$("#errorMessage").text("登录失败，密码或者用户名错误！");
						$("#errorAlert").removeClass("hidden").addClass("block");
						$("#user").val("");
						$("#password").val("");
					}
				},
				error:function() {
					// 网络错误提示
					$("#errorMessage").text("网络错误，请稍后重试");
					$("#errorAlert").removeClass("hidden").addClass("block");
				}
			});
		});
	});
</script>
</body>
</html>